<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpha zhe</title>
<!-- css引入   -->
    <th:block th:include="hander/navigation :: common(~{::links})"></th:block>
<!--  js引入  -->
    <th:block th:include="hander/navigation :: commonjs"></th:block>
    <script>
<!-- 异步加载技术频道(网站类别)/博客回显分页 -->
        $(function () {
        //异步加载网站类别
            var $classifys = $("#classifys");
            var classifys = "";
            layer.msg('正在加载。。。',{icon:16,shade:0.01,time: 1500});
            $.ajax({
                type: "post",
                url: "/classify/select-list",
                async: true,
                data: {},
                success: function (result) {
                    classifys += '<li class="active">\n' +
                        '             <span>技术频道</span>\n' +
                        '             <span class="hx"></span>\n' +
                        '         </li>';
                    $(result).each(function (index,item) {
                        classifys += '<li>\n' +
                            '             <a href="#" onclick="showBlog('+item.cid+',\''+item.cname+'\',1,5)">\n' +
                            '                <span>\n' +
                            '                   <img src="'+item.curl+'" class="tb ">\n' +
                            '                </span>\n' +
                            '                <span>'+item.cname+'</span>\n' +
                            '             </a>\n' +
                            '         </li>';
                    })
                    $classifys.html(classifys);//替换
                },
                error: function () {
                    layer.msg('API接口异常!',{icon:0,time:1500});
                }
            });

            /**
             * -2 : 为你推荐 (根据一周内点赞量高于N个赞进行升序查询)
             * -1：近期热门 (根据一周内阅读量N个进行升序查询)
             * 0：最新内容 (根据当天发布的内容进行升序排序查询)
             */
            showBlog(-2,'-2',1,5);

        });

//    异步加载博客、分页
        function showBlog(cid,ftitle,page,size) {
            var $ftitle = $("#ftitle"); //主页面右侧标题
            var $indexBlog = $("#indexBlog"); // 首页博客
            var $indexFy = $("#indexFy"); //首页分页
            var indexBlog = "";
            var IndexFy = "";
            if (cid == -2) {
                ftitle = '为你推荐';
            } else if (cid == -1) {
                ftitle = '近期热门';
            } else if (cid == 0) {
                ftitle = '最新内容';
            } else if (cid == "" || cid == null) {
                layer.msg('无效的点击,请刷新重试!',{icon:0,time:1500});
                return false;
            }
            $.post('essay/select-blog',
                {"cid":cid,"page":page,"size":size},
                function (result) {
                console.log(result);
                $(result.objects).each(function (index,item) {
                    var gmtModified = dateTime(new Date(item.gmtModified));
                    indexBlog += '<div class="news-item">\n' +
                        '                    <a  href="/essay/select-blogdetails?eid='+item.eid+'"  >\n' +
                        '                        <h4>'+item.etitle+'</h4>\n' +
                        '                        <div class="Mytitle">\n' +
                        '                            '+item.eessay+'   '+
                        '                        </div>\n' +
                        '                    </a>\n' +
                        '<!--         作者 日期       -->\n' +
                        '                    <div class="pariseAuth">\n' +
                        '                        <span>'+gmtModified+'</span>\n' +
                        '                        &emsp;\n' +
                        '                        <a href="" class="parise">\n' +
                        '                            <img src="/images/index/dz0.png" width="20px" />\n' +
                        '                            <span>点赞</span>\n' +
                        '                        </a>\n' +
                        '                    </div>\n' +
                        '                </div>';
                });
                if (result.pages > 0) {
                    //    遍历分页信息
                    IndexFy += '<ul class="pagination">\n' +
                        '         <li><a onclick="showBlog('+cid+',1,'+result.current+'-1<=0 ? 1: '+result.current+'-1,'+result.size+')" >&laquo;</a></li>\n';
                    for (let i = 1; i <= result.pages; i++) {
                        IndexFy += '<li class="" >\n' +
                            '        <a onclick="showBlog('+cid+',1,'+i+','+result.size+')" >'+i+'</a>\n' +
                            '     </li>\n';
                    };
                    IndexFy += '<li ><a onclick="showBlog('+cid+',1,'+result.current+'+1,'+result.size+')" >&raquo;</a></li>' +
                        ' </ul>';
                }else {
                    indexBlog += "<h3>暂无浏览文章！</h3>"
                }
                $indexFy.html(IndexFy);
                $indexBlog.html(indexBlog);

            });
            $ftitle.html(ftitle);
        }
    </script>
</head>
<body >
<!--  顶部导航栏  -->
<th:block th:replace="hander/navigation :: navheader" ></th:block>
<!-- 内容模块 -->
    <div class="row body2" >
<!--     左侧垂直菜单栏   -->
        <div class=" col-md-2 left">
            <div class="router-box">
                <div class="span2 " >
                    <ul class="nav nav-pills1 nav-stacked">
                        <li class="">
                            <a href="#" onclick="showBlog(-2,'-2',1,5)">
                                <span class="tb glyphicon glyphicon-tasks"></span>
                                <span>为你推荐</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="showBlog(-1,'-1',1,5)">
                                <i class="tb glyphicon glyphicon-thumbs-up"></i>
                                <span>近期热门</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="showBlog(0,'0',1,5)">
                                <i class="tb glyphicon glyphicon-globe"></i>
                                <span>最新内容</span>
                            </a>
                        </li>
                    </ul>
                </div>
<!--         技术社区       -->
                <div class="span2">
                    <ul class="nav nav-pills1 nav-stacked">
                        <li>
                            <span>极术社区</span>
                            <span class="hx"></span>
                        </li>
                        <li>
                            <a th:href="@{https://aijishu.com/channel/ai(aff=sf)}">
                                <span>
                                    <img th:src="@{/images/index/rgzn.png}" class="tb">
                                </span>
                                <span>人工智能</span>
                            </a>
                        </li>
                        <li>
                            <a th:href="@{https://aijishu.com/channel/server(aff=sf)}">
                                <span>
                                    <img th:src="@{/images/index/djs.png}" class="tb ">
                                </span>
                                <span>Arm大计算</span>
                            </a>
                        </li>
                    </ul>
                </div>
<!--         技术频道       -->
                <div class="span2">
<!--    加载技术频道    -->
                    <ul class="nav nav-pills1 nav-stacked" id="classifys"></ul>
                </div>
            </div>
        </div>
<!--    内容区域    -->
        <div class=" col-md-8 media-middle">
<!--     轮播图     -->
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators ">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img th:src="@{/images/index/1.png}" alt="First slide">
                    </div>
                    <div class="item">
                        <img th:src="@{/images/index/2.png}" alt="Second slide">
                    </div>
                </div>
            </div>
<!--    标题   -->
            <div class="feed-option" >
                <h4 id="ftitle" style="font-weight: 600;">为你推荐</h4>
                <p class="hx2"></p>
            </div>
<!--      博客      -->
            <div id="indexBlog" class="news-list">
                <div class="news-item">
                    <a  th:href="@{/navigation/blogdetails}"  >
                        <h4>MyBatis-Plus之代码生成器</h4>
                        <div class="Mytitle">
                            本次我使用的还是低版本2.1.9，目前MyBatis-Plus最新版本为3.3.1。理由很简单，够用。不想盲目的追赶高版本，同时高版本伴随着的不稳定性的存在，企业级应用开发是不允许这
                            前言 计算机网络知识，是面试常考的内容，在实际工作中也常常会涉及到。 最近总结了66条计算机网络相关的知识点，大家一起看一下吧： 1.比较http 0.9和http 1.0😀 http0.9只是一个简单的协议，只有一个GET方法
                        </div>
                    </a>
<!--         作者 日期       -->
                    <div class="pariseAuth">
                        <a>王康 </a>·
                        <span>2020年5月1日</span>
                        &emsp;
                        <a href="" class="parise">
                            <img th:src="@{/images/index/dz0.png}" width="20px" />
                            <span>点赞</span>
                        </a>
                    </div>
                </div>
            </div>
<!--            分页          -->
            <div id="indexFy" class="plq" style="text-align: center;">
                <ul class="pagination">
                    <li ><a href="#" onclick="s(0)">&laquo;</a></li>
                    <li class="active" ><a href="#" onclick="s(0)" >1</a></li>
                    <li class=" " ><a href="#" onclick="s(1)" >2</a></li>
                    <li class="" ><a href="#" onclick="s(2)" >3</a></li>
                    <li class=""  ><a href="#" onclick="s(3)" >4</a></li>
                    <li class="" ><a href="#" onclick="s(4)" >5</a></li>
                    <li ><a href="#" onclick="s(0+1)" >&raquo;</a></li>
                </ul>
            </div>
        </div>
    </div>
<!-- end -->
</body>
</html>